{extend name="public/base"/}
{block name="style"}

{/block}
{block name="body"}
<style>
    .menuBox li {
        float: left;
        width: 55px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 16px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    }
</style>
{include file="public/header" /}

<div class="pageBox userBox" >
    <div class="userLeft">
        <div class="headPic">
            {if $avatar ==""}
            <img id="userPicShow" src="__PUBLIC__/novel/images/ser.png"/>
            {else}
            <img id="userPicShow" src="{$avatar}"/>
            {/if}
            <span>{$nickname}</span>
        </div>
        <ul>
            <li class="liHove"><a href="/personal/info">我的主页</a></li>
            <li ><a href="/personal/bookcase">我的书架</a></li>
            <li ><a href="/personal/review">我的书评</a></li>
            <li ><a href="/personal/paylog/">充值记录</a></li>
            <li ><a href="/personal/moneylog/">订阅记录</a></li>
			<li ><a href="{:config('writer_url')}">作家中心</a></li>
        </ul>    
    </div>
    <div class="userRight">
        <div class="Tit userIco">个人信息<span><a href="{:url('user/edit')}">编辑资料</a></span></div>
        <div class="userInfoBox">
            <ul>
                <li><span>用户ID：{$uid}</span></li>
                <li><span>用户昵称：</span><input type="text" name="nickname" id="nickname" value="{$nickname}"></span></li>
                <li style="height:56px; line-height:56px;"><span>用户头像：</span><input type="hidden" name="userPicb64" id="userPicb64" /><input type="file" style="height:56px; width:88px; border:none; outline:none;opacity:0; cursor:pointer" id="imgUpload" name="imgUpload" accept="image/*" multiple/><div class="userImg"></div></li>
				 <li><div class="doUserInfo">保存</div></li>
            </ul>
        </div>
        
        
    </div>
</div>
{block name="include"}{include file="public:footer" /}{/block}

{/block}
{block name="script"}
    <script>
	var maxWidth=360;
	var maxHeight=360;
	var result = document.getElementById("userPic"); 
	var _showImg=document.getElementById("userPicShow");
	var _inptuFileImg=document.getElementById("userPicb64");
	document.getElementById("imgUpload").addEventListener('change',userReadFile,false);
	
	function userReadFile(){
		var file = this.files[0]; 
		if(!/image\/\w+/.test(file.type)){ 
			alert("文件必须为图片！"); 
			return false; 
		} 
		var reader = new FileReader();
		var imgType=file.type;
		reader.onload = function(e){
			var img = new Image();
			img.src = e.target.result;
			img.onerror = function(){
				alert("图片加载错误!");
			};
			img.onload = function(){
				drawImage(img,imgType);
			};
			img.remove();
		}
		reader.readAsDataURL(file); 
	}

function drawImage(img,imgType){
	var b64;
	var sw = img.width; 
	var sh = img.height;
	var tw = img.width; 
	var th = img.height; 
	var scale =sw/sh; 
	if (sw >maxWidth){ 
		tw = maxWidth; 
		th = Math.round(tw/scale); 
	} 
	if (sh>maxHeight){ 
		th = maxHeight; 
		tw = Math.round(th*scale); 
	}
	var canvas = document.createElement('canvas'); 
	var ctx = canvas.getContext('2d');
		canvas.width = tw; 
		canvas.height =th;
		ctx.drawImage(img,0,0,img.width,img.height,0,0,tw,th);
		b64=canvas.toDataURL(imgType);
		_inptuFileImg.value=b64;
		_showImg.src=b64;
		//_showImg.style.backgroundImage="url("+b64+")";
		//_showImg.style.backgroundSize="100%";
		canvas.remove();
}
$(document).ready(function(){
	$(".doUserInfo").click(function(){
		//var userPicb64= $('#userPicb64').val().replace(/\s+/g,"");
		//var name= $('#name').val().replace(/\s+/g,"");
		//var sex= $('#sex').val().replace(/\s+/g,"");
		var userPicb64= $('#userPicb64').val();
		var nickname= $('#nickname').val();
		$.postDo("{:url('user/edit')}",{userPicb64:userPicb64,nickname:nickname},"{:url('index/user/index')}");
	})
})
</script>

{/block}